<template>
  <el-dialog
    :close-on-click-modal="false"
    title="物流状态"
    v-model="visible"
    align-center
    width="600px"
    destroy-on-close
  >
    <div class="p-[12px]">
      <div class="row">
        <div
          :class="`steps ${formData?.sku_track_node_status > idx ? 'atv' : ''}`"
          v-for="(item, idx) in firstRowSteps"
          :key="idx"
        >
          <div class="h-[18px]">
            {{ formData[item.preDate] ? "预计" + formData[item.preDate] : "" }}
          </div>
          <div>
            <img
              :src="imgPath(item.icon)"
              alt=""
              class="h-[34px] w-[34px] icon"
            />

            <div class="iborder" v-if="idx < 3"></div>
          </div>
          <div class="text-[var(--base-text-color)]">{{ item.title }}</div>
          <div>{{ formData[item.date] }}</div>
        </div>
      </div>
      <div class="h-[80px] flex items-center direction-reverse">
        <div class="link"></div>
      </div>
      <div class="row direction-reverse">
        <div class="steps" v-for="(item, idx) in secondRowSteps" :key="idx">
          <div class="h-[18px]">
            {{ formData[item.preDate] ? "预计" + formData[item.preDate] : "" }}
          </div>
          <div>
            <img
              :src="imgPath(item.icon)"
              alt=""
              class="h-[34px] w-[34px] icon"
            />
            <div class="iborder" v-if="idx > 0"></div>
          </div>
          <div class="text-[var(--base-text-color)]">{{ item.title }}</div>
          <div>{{ formData[item.date] }}</div>
        </div>
      </div>
    </div>
    <template #footer>
      <el-button @click="handleClose(false)">取 消</el-button>
    </template></el-dialog
  >
</template>
<script setup lang="jsx">
import { trackingList } from "@/api/public.js";
const imgPath = (name) => {
  return new URL(`./img/${name}`, import.meta.url).href;
};
const firstRowSteps = reactive([
  {
    title: "发货",
    icon: "1.png",
    date: "shipping_date",
    preDate: "pre_shipping_date",
  },
  {
    title: "开船",
    icon: "2.png",
    date: "sailing_date",
    preDate: "pre_sailing_date",
  },
  {
    title: "到港",
    icon: "2.png",
    date: "arrival_date",
    preDate: "pre_arrival_date",
  },
  {
    title: "清关（完成）",
    icon: "4.png",
    date: "customs_clearance_date",
    preDate: "pre_customs_clearance_date",
  },
]);

const secondRowSteps = reactive([
  {
    title: "提取",
    icon: "5.png",
    date: "pickup_date",
    preDate: "pre_pickup_date",
  },
  {
    title: "签收",
    icon: "6.png",
    date: "signed_date",
    preDate: "pre_signed_date",
  },
  {
    title: "上架（第一次）",
    icon: "7.png",
    date: "first_listing_date",
    preDate: "pre_first_listing_date",
  },
  {
    title: "上架完成",
    icon: "8.png",
    date: "listing_completion_date",
    preDate: "pre_listing_completion_date",
  },
]);
// 打开弹窗
const visible = ref(false);
const formData = ref({});
const open = async (val) => {
  visible.value = true;
  const { data } = await trackingList(val);
  formData.value = data[0] || {};
};
const handleClose = (refresh) => {
  visible.value = false;
};
defineExpose({ open });
</script>
<style lang="scss" scoped>
.direction-reverse {
  flex-direction: row-reverse;
}
.row {
  display: flex;
  justify-content: space-between;

  * {
    font-size: 12px;
    color: var(--base-sub-text-color);
  }
  .iborder {
    width: 80px;
    height: 0;
    border-bottom: 2px dashed var(--base-border-color);
    position: relative;
    top: -26px;
    left: 80px;
  }
}
.steps {
  height: 100px;
  width: 100px;
  text-align: center;
  .icon {
    background: var(--base-small-color);
    margin: auto;
    margin-top: 4px;
    margin-bottom: 10px;
    border-radius: 50px;
  }
  &.atv {
    .icon {
      background: var(--base-primary-dark-bg);
    }
  }
}
.link {
  width: 1px;
  height: 40px;
  border-left: 2px dashed var(--base-border-color);
  margin-right: 50px;
}
</style>
